<template>
    <div class="add_dialog" id="add_dialog">
      <div class="basic_info">基本信息</div>
      <form class="layui-form" action="" lay-filter="formTeacherFilter">
        <div class="layui-row">
          <div class="layui-col-xs6">
            <div class="layui-form-item">
              <label class="layui-form-label">不动产单元号</label>
              <div class="layui-input-inline" >
                <select name="unitNumber" lay-filter="seletValue">
                  <option value=""></option>
                  <option v-for="(item,index) in unitNumberArr" :key="index" :value="item">{{ item }}</option>
                </select>
              </div>
            </div>
        </div>
          <div class="layui-col-xs6">
            <div class="layui-form-item">
              <label class="layui-form-label">租用面积</label>
              <div class="layui-input-block">
                <input
                  type="text"
                  name="area"
                  placeholder="请输入"
                  autocomplete="off"
                  class="layui-input"
                />
              </div>
            </div>
          </div>
        </div>
        <div class="layui-row">
          <div class="layui-col-xs6">
            <div class="layui-col-xs12">
              <div class="layui-form-item">
                <label class="layui-form-label">不动产地址</label>
                <div class="layui-input-inline">
                  <input
                    type="text"
                    id="real_address"
                    name="realEstateAddress"
                    placeholder="请先选择不动产单元号"
                    disabled
                    autocomplete="off"
                    class="layui-input"
                    style="border: 0;"
                  />
                </div>
              </div>
            </div>
            <div class="layui-col-xs12">
              <div class="layui-form-item">
                <label class="layui-form-label">租金</label>
                <div class="layui-input-block">
                  <input
                    type="text"
                    name="rent"
                    placeholder="请输入"
                    autocomplete="off"
                    class="layui-input"
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="layui-col-xs6">
            <div class="layui-form-item flex">
              <label class="layui-form-label">附件</label>
              <div
                class="layui-upload-drag"
                style="display: block"
                id="ID-upload-demo-drag"
              >
                <div class="isShow-style">
                  <i class="layui-icon layui-icon-upload"></i>
                <div>上传附件</div>
                </div>
                <div class="layui-hide" id="ID-upload-demo-preview" style="width: 100%; height: 100%;">
                  <img class="image_style" src="" alt="图片" style="max-width: 100%" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="layui-row">
          <div class="layui-col-xs6">
            <div class="layui-form-item">
              <label class="layui-form-label">开始日期</label>
              <div class="layui-input-inline layui-input-wrap">
                <div class="layui-input-prefix">
                  <i class="layui-icon layui-icon-date"></i>
                </div>
                <input type="text" name="startDate" id="startDate_dialog" lay-verify="date" placeholder="请选择" autocomplete="off" class="layui-input input-100">
              </div>
            </div>
          </div>
          <div class="layui-col-xs6">
            <div class="layui-form-item">
              <label class="layui-form-label">结束日期</label>
              <div class="layui-input-inline layui-input-wrap">
                <div class="layui-input-prefix">
                  <i class="layui-icon layui-icon-date"></i>
                </div>
                <input type="text" name="endDate" id="endDate_dialog" lay-verify="date" placeholder="请选择" autocomplete="off" class="layui-input input-100">
              </div>
            </div>
          </div>
          <div class="layui-col-xs6">
            <div class="layui-form-item">
              <label class="layui-form-label">联系人</label>
              <div class="layui-input-block">
                <input
                  type="text"
                  name="contactPerson"
                  placeholder="请输入"
                  autocomplete="off"
                  class="layui-input"
                />
              </div>
            </div>
          </div>
          <div class="layui-col-xs6">
            <div class="layui-form-item">
              <label class="layui-form-label">联系电话</label>
              <div class="layui-input-block">
                <input
                  type="text"
                  name="contactPhone"
                  placeholder="请输入"
                  autocomplete="off"
                  class="layui-input"
                />
              </div>
            </div>
          </div>
          <div class="layui-col-xs12">
            <div class="layui-form-item">
              <label class="layui-form-label">备注</label>
              <div class="layui-input-block">
                <textarea name="comment" placeholder="请输入" class="layui-textarea"></textarea>
              </div>
            </div>
          </div>
        </div>
      <div class="basic_info">发票信息</div>
      <div class="layui-row">
          <div class="layui-col-xs6">
            <div class="layui-form-item">
              <label class="layui-form-label">发票抬头</label>
              <div class="layui-input-block">
                <input
                  type="text"
                  name="invoiceTitle"
                  placeholder="请输入"
                  autocomplete="off"
                  class="layui-input"
                />
              </div>
            </div>
          </div>
          <div class="layui-col-xs6">
            <div class="layui-form-item">
              <label class="layui-form-label">纳税人识别号</label>
              <div class="layui-input-block">
                <input
                  type="text"
                  name="taxpayerId"
                  placeholder="请输入"
                  autocomplete="off"
                  class="layui-input"
                />
              </div>
            </div>
          </div>
          <div class="layui-col-xs6">
            <div class="layui-form-item">
              <label class="layui-form-label">电话地址</label>
              <div class="layui-input-block">
                <input
                  type="text"
                  name="phoneAddress"
                  placeholder="请输入"
                  autocomplete="off"
                  class="layui-input"
                />
              </div>
            </div>
          </div>
          <div class="layui-col-xs6">
            <div class="layui-form-item">
              <label class="layui-form-label">电子邮箱</label>
              <div class="layui-input-block">
                <input
                  type="text"
                  name="email"
                  placeholder="请输入"
                  autocomplete="off"
                  class="layui-input"
                />
              </div>
            </div>
          </div>
          <div class="layui-col-xs12">
          <div class="layui-form-item">
            <div class="layui-input-block">
            <button type="button" class="layui-btn" lay-submit lay-filter="submit_table">提交</button>
            <button type="reset" class="layui-btn layui-btn-primary reset_from" style="display: none;">取消</button>
            <button type="button" class="layui-btn layui-btn-primary cencel">取消</button>
          </div>
          </div>
        </div>
        </div>
      </form>
    </div>
  </template>
  <script>
  import { getRealEstate } from '@/api/real_estate_ledger'
  export default {
    data() {
      return {
        unitNumberArr: []
      }
    },
    created() {
      this.getUnitNumberArr()
    },
    methods: {
      async getUnitNumberArr() {
        const res = await getRealEstate()
        if(res.code === '00') {
          this.unitNumberArr = res.data.map(item => item.unitNumber)
        }
      }
    }
  };
  </script>
  <style scoped></style>
  
  <style scoped lang="scss">
  .add_dialog {
    padding: 12px;
    .layui-form-label {
      width: 100px;
    }
    .layui-input {
      width: 80%;
      &.input-91 {
        width: 91.5%;
      }
      &.input-100 {
        width: 100%;
      }
    }
    .layui-textarea {
      width: 92%;
    } 
    .layui-upload-drag {
      padding: 0;
      width: 210px;
      height: 100px;
    }
    .layui-upload-drag .layui-icon {
      font-size: 35px;
    }
    .layui-input-inline {
      width: 214px;
    }
    .basic_info {
      position: relative;
      margin-left: 22px;
      font-size: 16px;
      color: #141313;
      &::before {
        content: "";
        position: absolute;
        top: 50%;
        left: -16px;
        transform: translateY(-50%);
        display: inline-block;
        margin-right: 12px;
        width: 5px;
        height: 15px;
        background-color: #ff6534;
      }
    }
    .isShow-style {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
    }
    .image_style {
      width: 100%;
      height: 100%;
    }
  }
  </style>
  